<template>
  <nav class="side-menu">
    <ul>
      <li 
        v-for="item in menuItems" 
        :key="item.id"
        class="list-item"
        @click="selectMenu(item)"
      >
        {{ item.name }}
        <i class="arrow">&gt;</i>
      </li>
    </ul>
  </nav>
</template>

<script setup>
import { ref, defineEmits } from 'vue';

const emit = defineEmits(['menu-selected']);

const menuItems = [
  { id: 1, name: '语文' },
  { id: 2, name: '数学' },
  { id: 3, name: '英语' },
  { id: 4, name: '物理' },
  { id: 5, name: '化学' },
  { id: 6, name: '政治' },
  { id: 7, name: '地理' },
  { id: 8, name: '历史' },
  { id: 9, name: '其他' }
];

const selectMenu = (item) => {
  emit('menu-selected', item.name);
};
</script>

<style scoped>
.side-menu {
  width: 200px;
  background-color: #444;
  color: white;
  padding: 10px;
}

.side-menu ul {
  list-style: none;
  padding: 0;
}

.list-item {
  position: relative;
  display: flex; /* 文字与箭头水平对齐 */
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease; /* 分离过渡属性 */
}

.list-item:hover {
  background-color: #333;
  color: yellow;
}

.arrow {
  margin-left: auto; /* 右对齐 */
  transition: transform 0.2s ease; /* 独立控制箭头动画 */
}

.list-item:hover .arrow {
  transform: rotate(90deg);
}
</style>